<template>
  <div class="home-container viewsContainer">
    <ResInfo></ResInfo>
    <Swiper></Swiper>
    <div class="order-box container-fluid">
      <div class="row g-0">
        <router-link class="col-6" to="/takeout">
          <HomeFunc :picUrl="orderBoxPic[0]" :title="orderBoxTitle[0]" style="border-right: 1px solid #d7d7d7;"></HomeFunc>
        </router-link>
        <router-link class="col-6" to="/forhere">
          <HomeFunc :picUrl="orderBoxPic[1]" :title="orderBoxTitle[1]"></HomeFunc>
        </router-link>
      </div>
    </div>
    <div class="other-box container-fluid">
      <div class="row g-0">
        <router-link class="col-4" to="/resinfo">
          <HomeFunc :isColumn="true" :picUrl="otherBoxPic[0]" :title="otherBoxTitle[0]"></HomeFunc>
        </router-link>
        <router-link class="col-4" to="/rpshop">
          <HomeFunc :isColumn="true" :picUrl="otherBoxPic[1]" :title="otherBoxTitle[1]"></HomeFunc>
        </router-link>
        <router-link class="col-4" to="/coupon">
          <HomeFunc :isColumn="true" :picUrl="otherBoxPic[2]" :title="otherBoxTitle[2]"></HomeFunc>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import ResInfo from '@/components/HomeComponents/ResInfo.vue'
import Swiper from '@/components/swiper.vue'
import HomeFunc from '@/components/HomeComponents/HomeFunc.vue'

export default {
  name: 'home',
  data() {
    return {
      orderBoxPic: [
        require('@/assets/Home-other/takeout.png'),
        require('@/assets/Home-other/forhere.png')
      ],
      orderBoxTitle: [
        '外卖点餐',
        '堂食点餐'
      ],
      otherBoxPic: [
        require('@/assets/Home-resinfo/respic.png'),
        require('@/assets/Home-other/rpshop.png'),
        require('@/assets/Home-other/coupon.svg')
      ],
      otherBoxTitle: [
        '餐厅信息',
        '积分商城',
        '优惠卷'
      ]
    }
  },
  methods: {
    showmsg() {
      console.log(this.data.orderBoxTitle)
    }
  },
  components: {
    ResInfo,
    Swiper,
    HomeFunc
  }
}
</script>

<style lang="less" scoped>
/deep/ .swiper-container, .order-box {
  overflow: hidden;
  margin-top: 15px;
}
.order-box {
  padding: 0;
  height: 140px;
  * {
    height: 100%;
  }
  .HomeFunc-container {
    border-bottom: 1px solid #d7d7d7;
  }
}

.other-box {
  padding: 0;
  padding-top: 1px;
  height: 140px;
  * {
    height: 100%;
  }
}
</style>